import React from "react";
import { Input, Table, DatePicker, Radio, Checkbox, Select,Button } from 'antd'
import './NewSlyderAdventure.css'
import {Link} from 'react-router-dom'
const { RangePicker } = DatePicker;
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['普通', '一级代理', '二级代理', '三级代理'];
const defaultCheckedList = ['普通'];
const { Option } = Select;
export default class NewSlyderAdventure extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      AdvertisingData: [{
        key: '1',
        name: '一等奖',
        // prize: '返点金额',
        explain: '恭喜您~中了一等奖',
        noexplain: '很遗憾没有抽中，下次再来吧',
      },
      {
        key: '2',
        name: '二等奖',
        prize: '返点金额',
        explain: '恭喜您~中了二等奖',
        noexplain: '很遗憾没有抽中，下次再来吧',
      },
      ],
      value: 1,
      checkedList: defaultCheckedList,

    };
    this.columns = [
      {
        title: '奖项',
        dataIndex: 'name',
      },
      {
        title: '奖品',
        dataIndex: 'prize',
        render: () =>
          <div className={'prize'}>
            <span>返点金额</span>
            <Input />
          </div>

      },
      {
        title: '奖品数量',
        dataIndex: '',
        render: () =>
          <div className={'prizeNum'}>
            <Input />
          </div>
      },
      {
        title: '中奖说明',
        dataIndex: 'explain',
      },
      {
        title: '未中奖说明',
        dataIndex: 'noexplain',

      },
      // {
      //   title: '',
      //   dataIndex: '',
      //   render: () =>
      //     <Dropdown overlay={this.menu}>
      //       <Button>
      //         其他操作<DownOutlined />
      //       </Button>
      //     </Dropdown>
      // }
    ];
  }
  onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
  }
  onChangeChose = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  };
  onChangeList = checkedList => {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll: checkedList.length === plainOptions.length,
    });
  }
  onCheckAllChange = e => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };
  render() {
    let { AdvertisingData, size } = this.state
    return (
      <div>
        <div className={'choseTheme'}>
          <span>主题</span>
          <Input />
        </div>
        <div className={'choseTable'}>
          <Table bordered columns={this.columns} dataSource={AdvertisingData} onChange={this.onChange} />
        </div>
        <div className={'choseTime'}>
          <span>促销时间</span>
          <RangePicker size={size} />
        </div>
        <div className={'choseRules'}>
          <span>活动限制</span>
          <div>
            <Radio.Group onChange={this.onChangeChose} value={this.state.value}>
            <Radio value={1}>此活动每人仅限一次</Radio>
            <Radio value={2}>此活动每人每天一次</Radio>
          </Radio.Group>
          </div>
        </div>
        <div className={'choseDealer'}>
          <span>经销商</span>
          <div>
            <div className="site-checkbox-all-wrapper">
              <Checkbox
                indeterminate={this.state.indeterminate}
                onChange={this.onCheckAllChange}
                checked={this.state.checkAll}
              >
                全部级别
          </Checkbox>
            </div>
            <CheckboxGroup
              options={plainOptions}
              value={this.state.checkedList}
              onChange={this.onChangeList}
            />
          </div>
        </div>
        <div className={'choseAddress'}>
          <span>区域</span>
          <Select defaultValue="全部" style={{ width: 500 }} onChange={this.handleChange}>
            <Option value="全部">全部</Option>
            <Option value="中国">中国</Option>
            <Option value="其他区域">其他区域</Option>
          </Select>
        </div>
        <div className={'final'}>
        <Button className={'button'} style={{ backgroundColor: 'white', border: '1px solid #D3D3D3', color: 'black' }} type="primary">取消</Button>
        <Link to="/homepage/slyderadventure">
          <Button className={'button'} style={{ backgroundColor: '#4BD0B6', border: '#4BD0B6' }} type="primary">保存</Button>
        </Link>
        </div>
      </div>
    );
  }
}

